﻿@using KopSoftWms.Models;
@using YL.Core.Dto;

@section styles{
    <style>
        td input {
            width: 80px;
        }

        .tt {
            padding: 0px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
}

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            报表管理
            <small>出入库统计</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">报表管理</a></li>
            <li class="active">出入库统计</li>
        </ol>
    </section>
    <section class="content">
        <div class="row" style="padding-bottom:1px;">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-body">
                        <div class="input-group">
                            <span class="input-group-addon">时间段</span>
                            <input type="text" ref="datemin" id="datemin" v-model="datemin" class="form-control" style="width:120px;">
                            <span class="form-control" style="width:10px;border: none;"><i class="glyphicon glyphicon-arrow-right"></i></span>
                            <input type="text" ref="datemax" id="datemax" v-model="datemax" class="form-control" style="width:120px;margin-left:10px;">
                            <button name="search" v-on:click="searchL(0)" type="submit" class="btn btn-success" style="margin-left:10px;"><i class="fa fa-search"></i> 入库</button>
                            <button name="search" v-on:click="searchL(1)" type="submit" class="btn btn-info" style="margin-left:10px;"><i class="fa fa-search"></i> 出库</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">
                        <div id="toolbar" class="btn-group">
                            <button id="btn_export" v-on:click="exportL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-export" aria-hidden="true"></span>导出Excel
                            </button>
                        </div>
                        <div class="tt">@ViewBag.PageTitle</div>
                        <div style="overflow:scroll;">
                            <table id="bootstraptable" class="table table-bordered text-nowrap table-hover">
                                <thead>
                                    <tr>
                                        @{
                                            var titleList = ViewBag.Title as List<string>;
                                            if (titleList.Count > 0)
                                            {
                                                foreach (var titleItem in titleList)
                                                {
                                                    <th>@titleItem</th>
                                                }
                                            }

                                        }
                                    </tr>
                                </thead>
                                <tbody>
                                    @{
                                        var dataList = ViewBag.Data as List<StockInfoTableRow>;
                                        if (dataList.Count > 0)
                                        {
                                            foreach (var dataListItem in dataList)
                                            {
                                                string rowId = dataListItem.RowId;
                                                <tr id="o_@rowId">
                                                    @{
                                                        foreach (var dataItem in dataListItem.Data)
                                                        {
                                                            <td>
                                                                @dataItem
                                                            </td>
                                                        }
                                                    }
                                                </tr>
                                            }
                                        }

                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@section scripts{
    <script src="~/lib/lodop/LodopFuncs.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                datemin: '@ViewBag.dateMin',
                datemax: '@ViewBag.dateMax',
                StockType: '@ViewBag.stockType'
            },
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {
                    //显示active
                    _self.$refs.ReportNewStockInfo.parentNode.parentNode.classList.add("active");
                    _self.$refs.ReportNewStockInfo.classList.add("active");

                    $('#datemax').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });

                    $('#datemin').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                });
            },
            methods: {
                searchL: function (stockType) {
                    var url = "/Report/NewStockInfo?dateMax=" + $("#datemax").val() + "&dateMin=" + $("#datemin").val() + "&stockType="+stockType;
                    window.location.href = url;
                },
                exportL: function () {
                    var _self = this;
                    var data = {
                        dateMin: $("#datemin").val(),
                        dateMax: $("#datemax").val(),
                        stockType: '@ViewBag.stockType'
                    };
                    var index = layer.confirm("您确定要导出吗？", { btn: ["确定", "取消"] }, function () {
                        axios.get('/StockIn/Export?' + Qs.stringify(data), {
                            headers: {
                                'promise': 'promise'
                            },
                            responseType: 'arraybuffer'
                        }).then(function (response) {
                            var type = response.headers['content-type']
                            if (type === "application/json") {
                                var enc = new TextDecoder('utf-8')
                                var res = JSON.parse(enc.decode(new Uint8Array(response.data)))
                                layer.msg(res.Item2, { icon: 2 });
                            } else {
                                console.info(response);
                                let disposition = response.headers['content-disposition']
                                let fileName = decodeURI(disposition.substring(disposition.indexOf('filename=') + 9, disposition.indexOf('filename*=') - 2))
                                console.info(fileName);
                                let blob = new Blob([response.data], { type: 'application/ms-excelapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
                                if (window.navigator.msSaveOrOpenBlob) {
                                    navigator.msSaveBlob(blob, fileName);
                                } else {
                                    var link = document.createElement('a');
                                    link.href = window.URL.createObjectURL(blob);
                                    link.download = fileName;
                                    document.body.appendChild(link);
                                    link.click();
                                    document.body.removeChild(link);
                                    window.URL.revokeObjectURL(link.href);
                                }
                            }
                        }).catch(function (error) {
                            alert("导出失败！");
                        });
                        layer.close(index);
                    });
                },
            }
        });
    </script>
}